<template>
  <div>
    <a-modal v-model:visible="visible" title='盘头组详情:ZZ201119007' width="90%" @ok="handleOk" @cancel="handleCancel">
      <div style=" width: 95%;margin: 0 auto; ">
        <div>
          <table class="font15" style="width: 100%;border: 1px solid black;padding: 10px 0">
            <tr v-for="(item, index) in list" :key="index">
              <td class="center pd4">{{ item.key }}</td>
              <td class="center pd4">{{ item.value }}</td>
              <td class="center pd4">{{ item.key1 }}</td>
              <td class="center pd4">{{ item.value1 }}</td>
            </tr>
          </table>
          <br />
          <div ref="chartRef" style="width：100%; height:600px;"></div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import {defineProps, ref, defineExpose, Ref} from 'vue'
import { Modal as AModal } from 'ant-design-vue';
import {useECharts} from "/@/hooks/web/useECharts.ts";
// 控制弹窗组件显示隐藏
defineProps({
    list: {
        type: Array,
        default: []
    },
})
const visible = ref(false)
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
setOptions({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: 'cross'
    }
  },
  xAxis: {
    type: 'value',
    axisLine:{
      show:true
    }
  },
  yAxis: {
    type: 'category',
    data: ['停车位','停车挡','断头'],
    axisLabel: {
      // 标签的格式化函数
      formatter: function (value) {
        return value
      }
    }
  },
  series: [
    {
      type: 'scatter',
      data: [
        [102, 0],
        [102, 1],
        [204, 0],
        [306, 1],
        [408, 0]
      ]
    }
  ]
})
function openModal() {
    visible.value = true
}
function handleOk() {
    visible.value = false
}
function handleCancel() {
    visible.value = false
}
defineExpose({ openModal })
</script>
<style lang="less" scoped>
.font15 {
    font-size: 15px;
}

.center {
    text-align: center;
}

.pd4 {
    padding: 4px;
    min-width: 50px;
    border: 1px solid black;
}

.between {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}

.register_title {
    flex-basis: 25%;
    text-align: right;
    line-height: 40px;
}

.register_input {
    padding: 0 10px;
    flex: 1;
}
</style>